<!-- 注册页面 -->
<template>
  <div class="register-bg">
    <div class="register">
      <div class="eleme-register-title">
        <h1>欢迎注册</h1>
      </div>
      <div class="eleme-register-box">
        <el-form :model="formData" :rules="rules" ref="registerForm">
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="formData.email" placeholder="邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="mobile">
            <el-input v-model="formData.mobile" placeholder="手机号"></el-input>
          </el-form-item>

          <el-form-item>
            <!-- 注册点击事件 -->
            <el-button type="primary" class="comfirm_btn" @click="handleSubmit"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
        <div class="eleme-register-tip">
          <p class="tip">温馨提示</p>
          <p class="tip">
            用户名，长度3-16位，可以为数字、字母、汉字和下划线组合
          </p>
          <p class="tip">密码，长度6-16位，至少包含数字跟字母，可以有字符</p>
        </div>
        <div class="eleme-register-bottom">
          <router-link to="/login">已有账号，去登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      formData: {
        username: '',
        password: '',
        mobile: '',
        email: ''
      },
      rules: {
        username: [
          {
            // message: '账号输入不能为空',
            trigger: 'blur',
            // required: true
            validator: function (rule, value, callback) {
              var panduan1 = /^[\u4E00-\u9FA5A-Za-z0-9_]{3,16}$/;
              if (!value) {
                callback(new Error('账号不能为空'));
              } else if (!panduan1.test(value)) {
                callback(new Error('账号格式不对'));
              } else {
                callback();
              }
            }
          }
        ],
        password: [
          {
            // message: '密码输入不能为空',
            trigger: 'blur',
            // required: true,
            validator: function (rule, value, callback) {
              var panduan2 = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/;
              if (!value) {
                callback(new Error('密码不能为空'));
              } else if (!panduan2.test(value)) {
                callback(new Error('密码格式不对'));
              } else {
                callback();
              }
            }
          }
        ],
        mobile: [
          {
            trigger: 'blur',
            validator: function (rule, value, callback) {
              var panduan3 = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
              if (!value) {
                callback(new Error('手机号不能为空'));
              } else if (!panduan3.test(value)) {
                callback(new Error('请填写正确的手机号'));
              } else {
                callback();
              }
            }
          }
        ],
        email: [
          {
            trigger: 'blur',
            validator: function (rule, value, callback) {
              var panduan4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
              if (!value) {
                callback(new Error('邮箱不能为空'));
              } else if (!panduan4.test(value)) {
                callback(new Error('请填写正确的邮箱'));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSubmit: function () {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.$axios
            .post('/register', {
              username: this.formData.username,
              password: this.formData.password,
              mobile: this.formData.mobile,
              email: this.formData.email
            })
            .then(res => {
              if (res.status === 0) {
                this.$message.success(res.msg);
                localStorage.setItem('login', 'true');
                console.log(this.$store);
                this.$store.commit('login/register', 'true'); // 提交同步修改
                this.$router.push('/login'); //  跳转到dashboard页面
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(err => console.log(err));
        } else {
          this.$message.error('输入内容格式有问题 ！');
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.register-bg {
  background: url('../../assets/images/bg.jpg') no-repeat;
  background-size: 100% 100%;
  background-color: #2b4b6b;
}
.register {
  height: 100vh;
  width: 100%;
  // background-color: #2b4b6b;
  // padding-top: 100px;
  .eleme-register-title {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    h1 {
      color: white;
      font-weight: 400;
    }
  }

  .eleme-register-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #fff;
    height: 450px;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 20px;
    .comfirm_btn {
      width: 100%;
    }
  }
  .eleme-register-tip {
    margin: 0 auto;
    text-align: center;
    .tip {
      color: red;
    }
  }
  .eleme-register-bottom {
    margin-top: 20px;
    text-align: center;
    a {
      text-decoration: none;
    }
  }
}
</style>
